import React,{Component} from 'react';
import {View,Text,ImageBackground,Image,TouchableOpacity} from 'react-native';
import request from '../../../../utils/request'
import {BASE_URI, FRIENDS_QUESTIONSSECTION,FRIENDS_QUESTIONS_ANS} from '../../../../utils/pathMap'
import THNav from '../../../../components/THNav'
import { pxToDp } from '../../../../utils/stylesKits';
import { inject, observer } from 'mobx-react';
import LinearGradient from 'react-native-linear-gradient'
@inject("UserStore")
@observer
    class Index extends Component{
      titles ={
        "初级":require("../../../../res/leve1.png"),
        "中级":require("../../../../res/leve2.png"),
        "高级":require("../../../../res/leve3.png")
      }
      ansList = []
        state = {
            // 测试题 和索引
            questionList:[
                {"answers": [Array], "qsid": 1, "question_title": " 未来生活的幸福指数，跟物质和精神哪个关系更大？"}
            ],
            currentIndex:0
        }
        componentDidMount(){
            this.getList()
            console.log('xinxi'+JSON.stringify(this.props.UserStore.user))
        }
        // 获取测试题问卷
        getList = async ()=>{
            const url = FRIENDS_QUESTIONSSECTION.replace(':id',this.props.route.params.qid);
            const res = await request.privateGet(url)
            this.setState({ questionList:res.data  });
            
            console.log(res)
        }
        // 映射阿拉伯数字
        getNumber = (number) =>{
          let numCn = ''
          switch (number) {
            case 1:
              numCn = "一"
              break;
            case 2:
              numCn = "二"
              break;
            case 3:
              numCn = "三"
              break;
            case 4:
              numCn = "四"
                break;
            default:
              numCn = number
              break;
          }
          return numCn
        }
        // 选择答案
        chooseAns = async (ans) =>{
          this.ansList.push(ans);
          const {currentIndex,questionList} = this.state
          if(currentIndex >= questionList.length -1){
            const url = FRIENDS_QUESTIONS_ANS.replace(':id',this.props.route.params.qid)
            const answers = this.ansList.join(',')
            const res = await request.privatePost(url,{answers})
            this.props.navigation.navigate("TestResult",res.data);
            console.log(res)
          }else{
            this.setState({ currentIndex:this.state.currentIndex+1  });
          }
        }
        render(){
          const {questionList,currentIndex} = this.state
          const questions = this.props.route.params
          const {user} = this.props.UserStore
          if(!questionList[currentIndex]) return <></>
            return(
                <View style={{flex:1,backgroundColor:"#fff",position:"relative"}}>
                  <THNav title={questions.title} />
                  <ImageBackground style={{width:"100%",height:"100%"}} source={require("../../../../res/qabg.png")}>
                      {/* <Text>填写问卷页面</Text> */}
                      {/* 两侧图标 */}
                      <View style={{marginTop:pxToDp(60),justifyContent:"space-between",flexDirection:"row"}}>
                        <ImageBackground 
                        source={require("../../../../res/qatext.png")} 
                        style={{width:pxToDp(66),height:pxToDp(52),justifyContent:"center",alignItems:"flex-end"}}>
                          <Image source={{uri:BASE_URI+user.header}} 
                          style={{width:pxToDp(50),height:pxToDp(50),borderRadius:pxToDp(25)}} />
                        </ImageBackground>
                        <ImageBackground 
                        source={this.titles[questions.type]} 
                        style={{width:pxToDp(66),height:pxToDp(52),justifyContent:"center",alignItems:"flex-end"}}>
                        </ImageBackground>
                      </View>
                      <View style={{position:"absolute",width:"80%",top:pxToDp(60),alignSelf:"center",alignItems:"center"}}>
                        <View >
                          <Text style={{color:"#fff",fontSize:pxToDp(26),fontWeight:"bold"}}>第{this.getNumber(currentIndex+1)}题</Text>
                          <Text style={{color:"#ffffff9a",textAlign:"center"}}>({currentIndex+1}/{questionList.length})</Text>
                        </View>
                        <Text style={{marginTop:pxToDp(30),fontSize:pxToDp(20),color:"#fff",fontWeight:"bold"}}>{questionList[currentIndex].question_title}</Text>
                        <View style={{width:"100%"}}>
                          {questionList[currentIndex].answers.map((v,i)=>
                          <TouchableOpacity 
                          key={i}
                          onPress={this.chooseAns.bind(this,v.ans_No)}
                          style={{marginTop:pxToDp(10)}}>
                          <LinearGradient
                            style={{height:pxToDp(40),borderRadius:pxToDp(6),alignItems:"center",justifyContent:"center"}}
                            colors={["#6f45f3","#6f45f31a"]}
                            start={{x:0,y:0}}
                            end={{x:1,y:0}}
                          >
                            <Text style={{color:"#fff"}}>{v.ans_title}</Text>
                          </LinearGradient>
                        </TouchableOpacity>
                          )}
                          
                        </View>
                      </View>
                  </ImageBackground>
                  
                </View>
            );
        }
    }
export default Index; 